<template>
	<div>
		<div class="flex items-center py-1" v-for="(item, index) in fileList" :key="index">
			<span>{{ item.name }}</span>
			<div>
				<span style="color: #1a8cff; margin-left: 30px; cursor: pointer" @click="seeFile(item.url)">查看</span>
				<span style="color: #1a8cff; margin-left: 30px; cursor: pointer" @click="downLoad(item)">下载</span>
			</div>
		</div>
		<!-- 文件预览  -->
		<!-- 图片预览 -->
		<el-image-viewer v-if="showImageViewer" :url-list="[imageUrl]" @close="close" />
		<!-- pdf预览 -->
		<!-- <el-dialog title="查看" v-model="dialogVisible" width="60%" @close="close">
			<vue-pdf-app :pdf="imageUrl" style="height: 100vh" />
		</el-dialog> -->
	</div>
</template>

<script setup lang="ts" name="wngEditor">
import { ElMessage } from 'element-plus';
// import VuePdfApp from 'vue3-pdf-app';
// import 'vue3-pdf-app/dist/icons/main.css';
import { BasicTableProps, useTable } from '/@/hooks/table';
const state: BasicTableProps = reactive<BasicTableProps>({});
const { downBlobFile } = useTable(state);

// 定义父组件传过来的值
const props = defineProps({
	fileData: {
		type: Array,
		default: () => {
			return [];
		},
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['close']);
const fileList = ref<any>([]);

watch(
	() => props.fileData,
	(newValue: any) => {
		try {
			if (newValue) {
				fileList.value = JSON.parse(newValue);
			}
		} catch (error) {
			console.log('无效的 JSON 输入:');
		}
	},
	{ immediate: true }
);

const close = () => {
	showImageViewer.value = false;
	dialogVisible.value = false;
	emit('close');
};
//预览
const showImageViewer = ref(false);
const imageUrl = ref('');
const dialogVisible = ref(false);
const seeFile = (item: any) => {
	let imgShow = true;
	if (item.indexOf('.png') > -1 || item.indexOf('.jpg') > -1 || item.indexOf('.gif') > -1) {
		imgShow = true;
	} else {
		imgShow = false;
	}
	if (!imgShow) {
		ElMessage({
			message: '文件格式不支持预览',
			type: 'warning',
		});
		return;
	}
	imageUrl.value = item;
	//图片预览
	if (item.indexOf('.png') > -1 || item.indexOf('.jpg') > -1 || item.indexOf('.gif') > -1) {
		showImageViewer.value = true;
	}
};
//文件下载
const downLoad = (item: any) => {
	downBlobFile(item.url, {}, item.name);
	// downBlobFile('/admin/file/download', { objectName: item }, item);
};
</script>
